import { Alert, Button, Input, message, Modal, Tooltip } from "antd";
import React, { useEffect, useState } from "react";


const LazyImport: React.FC<{ onConfirm: (value: string) => void }> = ( props) => {

    const [visible, setVisible] = useState(false);

    const [code, setCode] = useState('');

    useEffect(() => {
        if (!visible) setCode('');
    }, [visible])

    function handleConfirm() {
        if (!code) {
            message.error('请输入配置');
            return;
        }
        props.onConfirm(code);
        setVisible(false);
    }

    return <div>
        <Tooltip title="输入自己想要的数据，系统默认生成">
            <Button onClick={() => setVisible(true)} type="primary">懒人配置</Button>
        </Tooltip>

        <Modal onOk={handleConfirm} onCancel={() => setVisible(false)} width={650} open={visible} title="懒人配置">
            <Alert type="warning" message="懒人配置，请输入您想要的字段,请以英文逗号隔开。如: username,password,age,header。注意: 懒人配置不会生成主键，字段类型都是 varchar 类型" />

            <div style={{ marginTop: '24px' }} >
                <span>配置</span>
                <Input style={{ marginTop: '4px' }} placeholder="请输入内容，请以英文逗号分割" value={code} onChange={(e) => setCode(e.target.value)}></Input>
            </div>
        </Modal>
    </div >
}

export default LazyImport;
